import { Typography, Image } from 'antd';
import { GithubOutlined, ReadOutlined,BilibiliOutlined, LinkOutlined} from '@ant-design/icons';
import '../../assets/css/works.css';
import { Tooltip } from 'antd';

const { Title } = Typography;

const WorksList = () => {
  const works = [
    {
      image: '/images/works/csgh.jpg',
      title: '城市灾害应急管理系统',
      category: '国家重点研发项目',
      github: 'https://gitee.com/gisjinger/ubmanage',
      bilibili: 'https://www.bilibili.com/video/BV1En91YvEYh/',
      blog: ['https://blog.csdn.net/m0_55049655/article/details/143217076']
    },
    
    {
      image: '/images/works/llm.jpg',
      title: 'LLM对话框组件',
      category: '字节青训营项目',
      github: 'https://gitee.com/gisjinger/dialogue-project',
/*       bilibili: 'https://www.bilibili.com/video/xxx', */
      blog: ['https://blog.csdn.net/m0_55049655/article/details/145608097'] 
    },
    
    {
      image: '/images/works/fzgh.jpg',
      title: '校发展规划中心网站',
      category: '学校官方网站',
/*       github: 'https://github.com/yourusername/fzgh',
      bilibili: 'https://www.bilibili.com/video/xxx', */
      blog: ['https://blog.csdn.net/m0_55049655/article/details/125357250'],
      website:"http://fz.hynu.cn/"
    },
    {
      image: '/images/works/thy.jpg',
      title: '古村古镇可视化平台',
      category: '古村古镇数字化',
    /*   github: 'https://github.com/yourusername/thy', */
      blog: ['https://gisjing.blog.csdn.net/article/details/122276370?spm=1001.2014.3001.5502', 'https://gisjing.blog.csdn.net/article/details/140390733?spm=1001.2014.3001.5502']
    },
   /*  {
      image: '/images/works/5.jpg',
      title: '古村古镇可视化系统',
      category: '数字乡村建设',
    },
    {
      image: '/images/works/6.jpg',
      title: '个人技术博客',
      category: 'CSDN优质创作',
    }, */
  ];

  return (
    <section id="works" className="works-section">
      <div className="works-container">
        <div className="works-grid">
          {works.map((work, index) => (
            <div key={index} className="work-item">
              <Image
                src={work.image}
                alt={work.title}
                className="work-image"
                preview={false}
              />
              <div className="work-default-title">{work.title}</div>
              <div className="work-info">
                <h3 className="work-title">{work.title}</h3>
                <div className="work-category">{work.category}</div>
                <div className="work-links">
                 { work.github&& <a href={work.github} target="_blank" rel="noopener noreferrer">
                    <GithubOutlined className="work-icon" />
                  </a>}
                 {work.bilibili&& <a href={work.bilibili} target="_blank" rel="noopener noreferrer">
                    <BilibiliOutlined className="work-icon" />
                  </a> }
                  {work.blog?.length > 0 && (Array.isArray(work.blog) ? 
                    work.blog.map((link, i) => (
                      <Tooltip key={i} title={`博客文章 ${i + 1}`}>
                        <a href={link} target="_blank" rel="noopener noreferrer">
                          <ReadOutlined className="work-icon" />
                        </a>
                      </Tooltip>
                    )) : 
                    <a href={work.blog} target="_blank" rel="noopener noreferrer">
                      <ReadOutlined className="work-icon" />
                    </a>
                  )}
                  {work.website&& <a href={work.website} target="_blank" rel="noopener noreferrer">
                    <LinkOutlined className="work-icon" />
                  </a>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default WorksList;